<template>
  <div class="home">
    <header>
      <div class="logo"></div>
      <h2>家谱分析</h2>
      <div class="form-wrapper">
        <el-input class="input-with-select" @keydown.enter="getData" v-model="input" clearable  placeholder="请输入内容">
          <el-button slot="append" @click="getData">搜索</el-button>
        </el-input>
      </div>
    </header>
    <div class="section-main">
      <div class="left">
        <div class="left-content">
          <div class="img-wrapper men">
            <img :src="infoHeader['photo']" alt="">
          </div>
          <div class="content-header">
            <div><i class="icon icon-name"></i><span>{{infoHeader['xm']}}</span></div>
            <div><i class="icon icon-zhen"></i><span>{{infoHeader['zjhm']}}</span></div>
          </div>
          <ul class="content-list">
            <li class="item" v-for="(item, key) in infoList" :key="key">
              <label class="label">{{item['label']}}</label>
              <span class="value">{{item['value']}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="right">
        <echart-view chartId="echart_view" :options="echartData"></echart-view>
      </div>
    </div>
  </div>
</template>

<script>
import { mockdata } from '../mock/mockdata.js'
import { apiGetReSelect, apiGetRelations, apiGetPersonInfo } from '../api/api.js'
import echartView from '../components/echart.vue'

export default {
  components: {
    echartView
  },
  data () {
    return {
      input: '430703198411060577',
      imgBaseUrl: process.env.NODE_ENV === 'development' ? 'http://192.168.0.181:8190/person/getPhoto?zjhm=' : '/person/getPhoto?zjhm=',
      infoHeader: {
        xm: '',
        zjhm: '',
        photo: '',
      },
      infoList: {
        'hyzk': { label: '婚姻状况', value: '' },
        'mz':   { label: '民族', value: '无' },
        'whcd': { label: '文化程度', value: '' },
        'zzxz': { label: '出生地详址', value: '' },
        'xz':   { label: '住址详址', value: '' },
      },
      imgMain: require('../assets/img/bg-main.png'),
      imgOther: require('../assets/img/bg-other.png'),
      iconMen: require('../assets/img/icon-men.png'),
      iconFamle: require('../assets/img/icon-famle.png'),
      sex: '',
      birdate: '',
      relation: {},
      _rdata: { data: [], links: [] },
      echartData: mockdata.echartData
    }
  },
  mounted() {
    this.getRelation();
    this.getData();
  },
  methods: {
    // 获取关系列表
    getRelation() {
      this.relation = {};
      apiGetReSelect().then(res => {
        if(!res) {
          return
        }
        for(let i in res) {
          this.$set(this.relation, i, res[i]);
        }
      })
    },
    // 计算年龄
    getAge(birthday) {
      if(!birthday) {
        return ''
      }
      // return new Date((new Date().getTime() - parseInt(birthday))).getUTCFullYear() - 1970
      return new Date().getFullYear() - new Date(parseInt(birthday)).getFullYear() + '岁'
    },
    getSex(sex) {
      if(!sex) {
        return ''
      }
      return sex === '男' ? this.iconMen : this.iconFamle
    },
    // canvas绘制圆形图片
    getImgData(imgSrc) {
      let canvas = document.createElement('canvas'),
          contex = canvas.getContext('2d');
      let img = new Image();
      let radius, diameter;
      // img.crossOrigin = '';   //图片获取过程中是否开启CORS功能
      img.onload = () => {
        diameter = Math.max(img.width, img.height);
        radius = diameter / 2;
        canvas.width = diameter;
        canvas.height = diameter;
        contex.clearRect(0, 0, diameter, diameter);
        contex.save();
        contex.beginPath();
        contex.arc(radius, radius, radius, 0, 2 * Math.PI); //画出圆
        contex.clip(); //裁剪上面的圆形
        contex.drawImage(img, img.width / 2 - radius, img.height / 2 - radius, diameter, diameter, 0, 0, diameter, diameter); // 在刚刚裁剪的园上画图
        contex.restore(); // 还原状态
        console.log(canvas)
      }
      img.src = imgSrc;
      return canvas.toDataURL('image/png', 1)
    },
    getIconImg(url) {
      // canvas元素, 图片元素
      let canvas = document.createElement('canvas'),
          img = new Image();
      let context = canvas.getContext("2d");

      let radius, diameter;
      img.crossOrigin = '';
      img.onload = () => {
        diameter = img.width;
        radius = img.width / 2;
        canvas.width = diameter;
        canvas.height = diameter;
        context.clearRect(0, 0, diameter, diameter);
        context.save();
        context.beginPath();
        context.arc(radius, radius, radius, 0, 2 * Math.PI); //画出圆
        context.clip(); //裁剪上面的圆形
        context.drawImage(img, 0, 0, diameter, diameter, 0, 0, diameter, diameter); // 在刚刚裁剪的园上画图
        context.restore(); // 还原状态
        return canvas
      }
      img.src = url;
      return canvas.toDataURL('image/png', 1);
    },
    // 获取当前人员信息与家族关系
    getData() {
      this.echartData['data'] = [];
      this.echartData['links'] = [];
      apiGetRelations(this.input).then(res => {
        let _resdata = res.data;
        // console.log(_resdata)
        if(!_resdata || typeof _resdata == 'string') {
          this.$message.error(_resdata);
          return;
        }
        for(let i in this.infoHeader) {
          this.$set(this.infoHeader, i, _resdata[i] ? _resdata[i] : '无');
        }
        for(let i in this.infoList) {
          if(i == 'csrq') {
            this.$set(this.infoList[i], 'value', _resdata[i] ? new Date(parseInt(_resdata[i])).Format('yyyy-MM-dd') : '无');
            continue;
          }
          this.$set(this.infoList[i], 'value', _resdata[i] ? _resdata[i] : '无');
        }
        // 人物关系
        let _this = this;
        // console.log(this.getImgData(_resdata['photo']));
        // _this.echartData['data'].push({ 
        //   name: _resdata['xm'], 
        //   value:  _resdata['zjhm'], 
        //   symbolSize: 80,
        //   symbol: 'image://'+this.getImgData(_resdata['photo']), 
        //   label: {
        //     position: 'bottom',
        //     formatter: function(val) {
        //       console.log(val)
        //       return [
        //         '{img|}',
        //         '{a|'+val['data'].name+'}{sex|}{age|'+_this.getAge(_resdata['csrq'])+'}',
        //         // '{b|'+val['data'].value+'}',
        //       ].join('\n')
        //     },
        //     rich: {
        //       a: {
        //         color: '#ffffff',
        //         align: 'left',
        //         lineHeight: 30,
        //         fontSize: 12,
        //         padding: [3, 0, 3,5]
        //       },
        //       b: {
        //         color: '#ffffff',
        //         align: 'center',
        //         padding: [3,5]
        //       },
        //       age: {
        //         color: '#ffffff',
        //         align: 'right',
        //         padding: [3,5]
        //       },
        //       sex: {
        //         width: 20,
        //         height: 20,
        //         align: 'left',
        //         backgroundColor: {
        //           image: _this.getSex(_resdata['xb'])
        //         },
        //       },
        //       // img: {
        //       //   width: 40,
        //       //   height: 40,
        //       //   align: 'center',
        //       //   padding: 5,
        //       //   backgroundColor: {
        //       //     image: _this.getIconImg(this.imgBaseUrl+_resdata['photo'])
        //       //   },
        //       //   borderRadius: 20,
        //       //   overflow: 'hidden'
        //       // }
        //     }
        //   }
        // });
        _this.echartData['data'].push({ 
          name: _resdata['xm'], 
          value: {
            id: _resdata['zjhm'],
            symbol: _resdata['photo'],
            symbolSize: 'center',
            sex: _this.getSex(_resdata['xb']),
            age: _this.getAge(_resdata['csrq'])
          } 
        });
        let _relation = _resdata['relations'];
        if(!_relation || _relation.length < 1) {
          return;
        }
        for(let i in _relation) {
          if(_relation[i].length < 1) {
            continue
          }
          _relation[i].forEach(elem => {
            let text = elem.split('|'),
                sex = '',
                birdate = '';
            apiGetPersonInfo(text[0]).then(res => {
              if(res.data.success) {
                sex = res.data.data[0]['xb'];
                birdate = res.data.data[0]['csrq'];
              }
              _this.echartData['data'].push({ 
                name: text[1], 
                value: {
                  id: text[0],
                  symbol: this.imgBaseUrl+text[0],
                  symbolSize: 'child',
                  sex: _this.getSex(sex),
                  age: _this.getAge(birdate)
                } 
              });
              // _this.echartData['data'].push({ 
              //   name: text[1], 
              //   value: text[0], 
              //   symbol: 'image://'+this.imgBaseUrl+text[0], 
              //   label: {
              //     position: 'bottom',
              //     formatter: function(val) {
              //       return [
              //         '{img|}',
              //         '{a|'+val['data'].name+'}{sex|}{age|'+_this.getAge(birdate)+'}',
              //         // '{b|'+val['data'].value+'}',
              //       ].join('\n')
              //     },
              //     rich: {
              //       a: {
              //         color: '#ffffff',
              //         align: 'left',
              //         lineHeight: 30,
              //         fontSize: 12,
              //         padding: [3, 0, 3,5]
              //       },
              //       b: {
              //         color: '#ffffff',
              //         align: 'center',
              //         padding: [3,5]
              //       },
              //       age: {
              //         color: '#ffffff',
              //         align: 'right',
              //         padding: [3,5]
              //       },
              //       sex: {
              //         width: 20,
              //         height: 20,
              //         align: 'left',
              //         backgroundColor: {
              //           image: _this.getSex(sex)
              //         }
              //       },
              //       // img: {
              //       //   width: 40,
              //       //   height: 40,
              //       //   align: 'center',
              //       //   padding: 5,
              //       //   backgroundColor: {
              //       //     image: _this.getIconImg(this.imgBaseUrl+text[0] )
              //       //   },
              //       //   borderRadius: 20,
              //       //   overflow: 'hidden'
              //       // }
              //     }
              //   },
              //   img: this.imgBaseUrl+text[0] 
              // });
            }).catch(error => {
              _this.echartData['data'].push({ 
                name: text[1], 
                value: {
                  id: text[0],
                  symbol: this.imgBaseUrl+text[0],
                  symbolSize: 'child',
                  sex: _this.getSex(sex),
                  age: _this.getAge(birdate)
                } 
              });
              // _this.echartData['data'].push({ 
              //   name: text[1], 
              //   value: text[0], 
              //   symbol: 'image://'+this.imgOther, 
              //   label: {
              //     position: 'bottom',
              //     formatter: function(val) {
              //       return [
              //         '{img|}',
              //         '{a|'+val['data'].name+'}{sex|}{age|'+_this.getAge(birdate)+'}',
              //         '{b|'+val['data'].value+'}',
              //       ].join('\n')
              //     },
              //     rich: {
              //       a: {
              //         color: '#ffffff',
              //         align: 'center',
              //         // lineHeight: 30,
              //         fontSize: 12,
              //         padding: [3, 0, 3,5]
              //       },
              //       b: {
              //         color: '#ffffff',
              //         align: 'center',
              //         padding: [3,5]
              //       },
              //       age: {
              //         color: '#ffffff',
              //         align: 'center',
              //         padding: [3,5]
              //       },
              //       sex: {
              //         width: 20,
              //         height: 20,
              //         align: 'center',
              //         backgroundColor: {
              //           image: _this.getSex(sex)
              //         }
              //       },
              //       img: {
              //         width: 40,
              //         height: 40,
              //         align: 'center',
              //         padding: 5,
              //         background: {
              //           image: _this.getIconImg(this.imgBaseUrl+text[0] )
              //         },
              //         borderRadius: 20,
              //         overflow: 'hidden'
              //       }
              //     }
              //   }
              // });
            })
            _this.echartData['links'].push({ source: _resdata['xm'], target: text[1], value: this.relation[i] });           
          });
        }
      })  
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "../assets/style/home.styl";
</style>
<style lang="stylus">
.el-input__inner{
  font-size 14px
  color #fff
  border: 2px solid #0febff
  border-radius 0 !important
  background-color transparent
  &:focus, &:hover{
    border-color rgba(15, 235, 255, .8)
  }
}
.el-input-group__append{
  color #fff
  background-color #0febff
  border: none
  border-radius 0
  cursor pointer
}
.el-input-group{
  vertical-align middle
}
@media screen and (max-height: 900px) {
  .el-input__inner{
    height 30px
    line-height 30px
  }
}
</style>
